<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click="false" background-color="#fff">
		<view class="header">
			<view class="header-title">赠送一个小礼物</view>
			<uni-icons type="close" @click="close"></uni-icons>
		</view>
		<view class="tabber">
			<view class="tabber-gift">
				<text>拥有[{{userInfo?.gift_money/10 || 0}} 福币]</text>
				<view @click="exchange" class="exchange">兑换</view>
			</view>
			<view class="tabber-rechange" @click="rechange">充值</view>
		</view>
		<view class="body">
			<view class="body-item">
				<image src="../../static/logo.png" mode="aspectFill" class="body-item-image"></image>
				<view class="body-item-name">玫瑰</view>
				<view class="body-item-price">10福币</view>
				<uni-number-box v-model="number" :min="1" :max="999" @change="numChange"></uni-number-box>
				<view class="body-item-btn" @click="goGift">赠送</view>
			</view>
		</view>
		<wolf-rechange ref="rechangeRef"></wolf-rechange>
		<wolf-exchange ref="exchangeRef"></wolf-exchange>
		
	</uni-popup>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="留言" value="" placeholder="请输入一句话留言"
			@confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
	/**
	 * 送礼物组件
	 */
	import {
		mapState,
		mapActions
	} from 'pinia'
	import {
		useUserStore
	} from "@/pinia/user.js"
	const giftCloud = uniCloud.importObject('two-plus-one')
	const db = uniCloud.database();

	export default {
		name: "wolf-to-gift",
		props: {
			giftId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				number: 1,
				add_id: ''
			};
		},
		computed: {
			...mapState(useUserStore, ['userInfo'])
		},
		methods: {
			...mapActions(useUserStore, ['updateUserInfo']),
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			numChange(e) {
				console.log(e);
				this.number = e
			},
			goGift() {
				uni.showModal({
					confirmText: "赠送",
					title: "提示",
					content: `确认赠送${this.number}朵玫瑰`,
					success: (res) => {
						if (res.confirm) {
							this.go()
						}
					}
				})
			},
			go() {
				let gift_money = this.userInfo.gift_money || 0
				let pay_money = this.number * 100
				if (pay_money > gift_money) {
					console.log("余额不足");
					this.rechange()
				} else {
					console.log("支付");
					this.goPay(pay_money)
				}
			},
			async goPay(price) { //支付福币，赠送玫瑰
				// console.log(price,this.giftId);
				// return this.inputDialogToggle()
				uni.showLoading({
					title: '提交中...'
				})
				let now = new Date().getTime() //获取当前时间戳
				let code = '' + (parseInt(Math.random() * 1000000) + 1000000)
				code = code.substring(1, 7)
				let order_no = "ACT" + code + now //业务订单号
				let obj = {
					uid: this.userInfo._id,
					pid: this.giftId,
					order_no,
					number: this.number,
					price,
					gift_name: "玫瑰"
				}
				let res = await giftCloud.setProfitGift(obj)
				console.log("res====>>",res);
				this.add_id = res.id
				this.updateUserInfo()
				uni.hideLoading()
				this.close()
				this.inputDialogToggle()
				console.log("obj", obj);
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			async dialogInputConfirm(val) {
				uni.showLoading({
					title: '留言中...'
				})
				// return console.log("val==>",val);
				await db.collection('wolf-gift-log').doc(this.add_id).update({
					message:val
				})
				uni.hideLoading()
				this.$refs.inputDialog.close()
				
			},
			rechange() { //去充值
				this.$refs.rechangeRef.open()
			},
			exchange(){//福币兑换
				this.$refs.exchangeRef.open()
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		display: flex;
		padding: 10rpx 20rpx;

		&-title {
			margin: auto;
		}
	}

	.tabber {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		padding: 10rpx 20rpx;

		&-gift {
			color: #c33864;
			display: flex;
			align-items: center;
			.exchange{
				margin-left: 10rpx;
				background-color: #c33864;
				color: #fff;
				border-radius: 10rpx;
				padding: 2rpx 10rpx;
			}
		}

		&-rechange {
			color: #fff;
			background-color: #FF5722;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
		}
	}

	.body {
		padding: 20rpx;
		display: flex;
		justify-content: center;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 1px solid #fff;
			background-color: #5b5b5b;
			border-radius: 10rpx;
			padding-top: 10rpx;
			color: #fff;
			width: 300rpx;
			font-size: 14px;

			&-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			&-name {
				padding: 10rpx;
			}

			&-price {
				padding: 10rpx;
			}

			&-btn {
				background-color: #c33864;
				width: 100%;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				padding: 10rpx 20rpx;
				text-align: center;
				box-sizing: border-box;
				margin-top: 10rpx;
			}
		}
	}
</style>